<template>
	<!-- 弹出框 -->
	<uv-popup ref="popup" mode="bottom" @change='popcha' :overlay="false">
		<view class="mode">
			<view class="closefun" @click="closefun">
				<text class="dy-iconfont icon-qiehuanqiyou"></text>
			</view>
			<view class="key f-sb-c">
				<view class="key-num">
					<view class="keynum" :class="{'fade-in':hoverClass1}" @click="setnum('1')">1</view>
					<view class="keynum" :class="{'fade-in':hoverClass2}" @click="setnum('2')">2</view>
					<view class="keynum" :class="{'fade-in':hoverClass3}" @click="setnum('3')">3</view>
					<view class="keynum" :class="{'fade-in':hoverClass4}" @click="setnum('4')">4</view>
					<view class="keynum" :class="{'fade-in':hoverClass5}" @click="setnum('5')">5</view>
					<view class="keynum" :class="{'fade-in':hoverClass6}" @click="setnum('6')">6</view>
					<view class="keynum" :class="{'fade-in':hoverClass7}" @click="setnum('7')">7</view>
					<view class="keynum" :class="{'fade-in':hoverClass8}" @click="setnum('8')">8</view>
					<view class="keynum" :class="{'fade-in':hoverClass9}" @click="setnum('9')">9</view>
					<view class="keynum keynum0" :class="{'fade-in':hoverClass0}" @click="setnum('0')">0</view>
					<view class="keynum" :class="{'fade-in':hoverClass}" v-if="decimal>0" @click="setnum('.')">·
					</view>
				</view>
				<view class="btn">
					<view class="delete" :class="{'fade-in':hoverClassDelete}" @click="del">
						<text class="dy-iconfont icon-delete"></text>
					</view>
					<view class="confirm" :class="{'confirm-no':num <= 0 || (num * 1) > balance}" @click="confirm">提现</view>
				</view>

			</view>
		</view>
	</uv-popup>
</template>

<script>
	/**
	 * ongetnum_ -> 绑定方法 数字变化
	 * getnum_   -> 绑定方法 点击确认
	 * */

	export default {
		name: "keyboard",
		props: {
			leng: { //输入长度
				type: [String, Number],
				default: '6'
			},
			pass: { // 是否开启密码模式
				type: Boolean,
				default: false
			},
			pnum: { //初始化数量
				type: [String, Number],
				default: '0'
			},
			balance: { //初始化数量
				type: [String, Number],
				default: '0'
			},

			decimal: { // 保存几位小数
				type: [String, Number],
				default: 2
			},
		},
		data() {
			return {
				num: '0', //初始化输入数字
				hoverClass: false,
				hoverClass0: false,
				hoverClass1: false,
				hoverClass2: false,
				hoverClass3: false,
				hoverClass4: false,
				hoverClass5: false,
				hoverClass6: false,
				hoverClass7: false,
				hoverClass8: false,
				hoverClass9: false,
				hoverClassDelete: false,
			};
		},
		created() {
			//自定义初始化值
			let pnum = this.pnum;
			this.num = pnum;
		},
		methods: {
			// 模态状态改变
			popcha(e) {
				this.num = this.pnum;
			},

			// 显示弹窗
			openfun() {
				this.$refs.popup.open()
			},
			// 关闭弹窗
			closefun() {
				this.$refs.popup.close()
			},

			// 输入
			setnum(e) {
				if (e == '.') {
					this.hoverClass = true
				} else if (e == '1') {
					this.hoverClass1 = true
				} else if (e == '2') {
					this.hoverClass2 = true
				} else if (e == '3') {
					this.hoverClass3 = true
				} else if (e == '4') {
					this.hoverClass4 = true
				} else if (e == '5') {
					this.hoverClass5 = true
				} else if (e == '6') {
					this.hoverClass6 = true
				} else if (e == '7') {
					this.hoverClass7 = true
				} else if (e == '8') {
					this.hoverClass8 = true
				} else if (e == '9') {
					this.hoverClass9 = true
				} else if (e == '0') {
					this.hoverClass0 = true
				}
				this.init()
				let num = String(this.num);

				//输入长度小于设置
				if (num.length < this.leng) {

					// 判断小数点
					let numof = num.indexOf('.');
					console.log(numof);
					if (numof > -1) { //小数点处理
						if (e != '.') {
							// if (num == 0) {
							// 	num = e;
							// } else {
							// 	num = String(num) + e;
							// }
							num = String(num) + e;

							// 设置保留几位
							let decimal = this.decimal; //小数点
							if (num.length > (numof + 1) + decimal) {
								num = num.substr(0, (numof + 1) + decimal);
							}
						}
					} else {
						if (num == 0) {
							if (e != '.') {
								num = e;
							} else {
								num = String(num) + e;
							}
						} else {
							num = String(num) + e;
						}
					}

					this.num = num;
					this.$emit('ongetnum_', num); //数字变化调用
				}
			},
			init() {
				setTimeout(() => {
					this.hoverClass = false
					this.hoverClass0 = false
					this.hoverClass1 = false
					this.hoverClass2 = false
					this.hoverClass3 = false
					this.hoverClass4 = false
					this.hoverClass5 = false
					this.hoverClass6 = false
					this.hoverClass7 = false
					this.hoverClass8 = false
					this.hoverClass9 = false
					this.hoverClassDelete = false
				}, 1200)
			},

			// 删除
			del() {
				this.hoverClassDelete = true
				this.init()
				let num = String(this.num);
				num = num.substr(0, num.length - 1);
				if (num.length == 0) {
					console.log(this.pass);
					if (this.pass) {
						this.num = '';
					} else {
						this.num = 0;
					}
				} else {
					this.num = num;
				}

				this.$emit('ongetnum_', num); //数字变化调用
			},
			// 确定
			confirm() {
				if (this.num <= 0 || this.num > this.balance) {
					return
				}
				let num = String(this.num);

				if (num.charAt(num.length - 1) == '.') { // 最后一位是小数点就去掉
					num = num.substr(0, num.length - 1);
					this.num = num;
				}

				this.$emit('getnum_', num);
			},
		}
	}
</script>

<style lang="scss">
	.mode {
		background-color: #fff;

		.closefun {
			height: 60rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;

			.dy-iconfont {
				font-size: 24rpx;
				color: #A2A2A2;
				transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				-o-transform: rotate(90deg);
			}
		}

		.f-c-c {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.f-sb-c {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.inp {
			height: 90rpx;
			padding: 20rpx;
			background-color: #f1f1f1;

			.text {
				width: 100%;
				display: flex;
				height: 62rpx;
				background-color: #fff;
				border-radius: 8rpx;
			}
		}

		.key {
			width: 100%;

			.key-num {
				width: calc((100% / 4) * 3);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;

				.keynum {
					text-align: center;
					font-size: 38rpx;
					font-weight: 900;
					width: calc(100% / 3);
					height: 100rpx;
					line-height: 100rpx;
					border: 1rpx solid #F1F1F1;
					border-left: none;
					border-top: none;
					box-sizing: border-box;
					// -webkit-transition: background 0.1s ease-in-out;
					// transition: background 0.1s ease-in-out;
					background: rgba(255, 255, 255, 1);

					&.fade-in {
						-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
						animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					}
				}

				.keynum0 {
					width: calc((100% / 3) * 2);
				}

				.keyboard-item-hover {
					background: rgba(0, 0, 0, 0.1);
				}
			}

			.btn {
				width: calc(100% / 4);

				.delete {
					text-align: center;
					line-height: 100rpx;
					height: 100rpx;
					border: 1rpx solid #F1F1F1;
					box-sizing: border-box;
					border-top: none;
					// -webkit-transition: background 0.1s ease-in-out;
					// transition: background 0.1s ease-in-out;
					background: rgba(255, 255, 255, 1);

					.dy-iconfont {
						font-size: 50rpx;
						color: #353535;
					}

					&.fade-in {
						-webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
						animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					}
				}

				.keyboard-item-hover {
					background: rgba(0, 0, 0, 0.1);
				}

				.confirm {
					text-align: center;
					line-height: 300rpx;
					height: 300rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					background: #000;
				}

				.confirm-no {
					background: #7E7E7E;
				}
			}
		}
	}

	@-webkit-keyframes fade-in {
		0% {
			opacity: 0.1;
		}

		30% {
			opacity: 0.7;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes fade-in {
		0% {
			opacity: 0.1;
		}

		30% {
			opacity: 0.7;
		}

		100% {
			opacity: 1;
		}
	}
</style>